<template>
          <div id="app">
                   <!-- 有子菜单 -->
                   <div id="menu" v-for="item in menulist" :key="item.meta.key" >
              <el-sub-menu :index="item.path" v-if="item.children && item.children.length>0">
                    <template #title>
                      <svg class="icon" aria-hidden="true" style="font-size:18px">
                          <use :xlink:href="'#'+item.meta.icon"></use>
                      </svg>
                       <span >{{ item.meta.title}}</span>
                       </template>
                    <menuItem  :menulist="item.children" ></menuItem>
                  </el-sub-menu>  
                  <!-- 一级菜单 -->
                <el-menu-item class="one"  :index="item.path" @click="handleJump" v-else>
                  <svg class="icon" aria-hidden="true" style="font-size:18px">
                          <use :xlink:href="'#'+item.meta.icon"></use>
                      </svg>
                  <template #title>{{ item.meta.title }}</template>
                </el-menu-item>
             </div>
          </div>
</template>

<script setup>
import {watchEffect} from 'vue'
import {useRouter} from 'vue-router'
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'
import { ref } from 'vue'
let router = useRouter()
let props = defineProps({
   menulist:{
    type:Array,
    default:()=>[]
   }
})
watchEffect(()=>{
  // console.log(props.menulist)
})
let handleJump = (itemIntance) =>{
  console.log(itemIntance.indexPath);
  let path ='/'+ itemIntance.indexPath.join('/')
  router.push(path)
}
</script>
<script>
export default {
  name: 'menuItem',
}
</script>
<style scoped>
/* #id{
  transition: all 3s s linear;
} */
:deep(.el-sub-menu__title) {
  padding-right:30px;
  
}
/* :deep(.one){
  padding-right:0 !important;
} */
:deep(.el-menu){
width: 162px;
}
:deep(.el-icon ){
  margin-left: 200px;
}
</style>